<template>
  <div class="detailCon">
    <div v-if="orderNo !== undefined &&useWODetails.displayConfig.show_Order_Number" class="row detailItem items-center">
      <span class="col-auto dTitle">发镶单编号</span>
      <span class="col dValue">{{ orderNo }}</span>
    </div>
    <div
      v-if="dueDate !== undefined && updatedDueDate == null && useWODetails.displayConfig.show_Due_Date"
      class="row detailItem"
    >
      <span class="col-auto dTitle">交货日期</span>
      <span class="col dValue">{{ dueDate }}</span>
    </div>
    <div v-if="updatedDueDate !== null && useWODetails.displayConfig.show_Due_Date" class="row detailItem">
      <span class="col-auto dTitle">交货日期</span>
      <span class="col dValue">{{ updatedDueDate }}({{ dueDate }})</span>
    </div>
    <div v-if="orderQty !== undefined && useWODetails.displayConfig.show_Quantity" class="row detailItem">
      <span class="col-auto dTitle">件数</span>
      <span class="col dValue">{{ orderQty }}</span>
    </div>
    <div v-if="goodsType !== undefined&& (useWODetails.displayConfig.show_Cargo_type||useWODetails.displayConfig.show_Description)" class="row detailItem">
      <span class="col-auto dTitle">{{useWODetails.displayConfig.show_Cargo_type?'货型':''}} {{useWODetails.displayConfig.show_Description?'/描述':''}}</span>
      <span class="col dValue">{{ useWODetails.displayConfig.show_Cargo_type?goodsType:'' }}  {{ useWODetails.displayConfig.show_Description?'/'+description:'' }}</span>
    </div>
    <div v-if="ringType !== undefined && useWODetails.displayConfig.show_Product_Size" class="row detailItem">
      <span class="col-auto dTitle">产品大小</span>
      <span class="col dValue">{{ ringType }}</span>
    </div>
    <div v-if="goldType !== undefined && useWODetails.displayConfig.show_Fineness" class="row detailItem">
      <span class="col-auto dTitle">成色</span>
      <span class="col dValue">{{ goldType }}</span>
    </div>
    <div v-if="site !== undefined && useWODetails.displayConfig.show_Purchases_Unit" class="row detailItem">
      <span class="col-auto dTitle">购货单位</span>
      <span class="col dValue">{{ site }}</span>
    </div>
    <div v-if="source !== undefined && useWODetails.displayConfig.show_Purchases_Unit" class="row detailItem">
      <span class="col-auto dTitle">內/外销</span>
      <span class="col dValue">{{ source }}</span>
    </div>
    <div v-if="stoneReadyDate !== undefined && useWODetails.displayConfig.show_Stone_Date" class="row detailItem">
      <span class="col-auto dTitle">上石日期</span>
      <span class="col dValue">{{ stoneReadyDate }}</span>
    </div>
    <div v-if="flowerNo !== undefined && useWODetails.displayConfig.show_Flower_Patten" class="row detailItem">
      <span class="col-auto dTitle">花头号数</span>
      <span class="col dValue">{{ flowerNo }}</span>
    </div>
    <div v-if="posType !== undefined && useWODetails.displayConfig.show_Manifest_Type" class="row detailItem">
      <span class="col-auto dTitle">货单类别</span>
      <span class="col dValue">{{ posType }}</span>
    </div>
    <div v-if="fgArticle !== undefined" class="row detailItem">
      <span class="col-auto dTitle">FG Article</span>
      <span class="col dValue">{{ fgArticle }}</span>
    </div>
    <div v-if="designNum !== undefined && useWODetails.displayConfig.show_Design_Number" class="row detailItem">
      <span class="col-auto dTitle">设计编号</span>
      <span class="col dValue">{{ designNum }}</span>
    </div>
    <div v-if="mouldNo !== undefined && useWODetails.displayConfig.show_Model_Number" class="row detailItem">
      <span class="col-auto dTitle">模号</span>
      <span class="col dValue">{{ mouldNo }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useWoDetailsStore } from "src/stores/modules/wodetailsStore";

// Tab 1 Fields
let orderNo = ref(null),
  dueDate = ref(null),
  updatedDueDate = ref(null),
  orderQty = ref(null),
  goodsType = ref(null),
  description = ref(null),
  ringType = ref(null),
  goldType = ref(null),
  site = ref(null),
  stoneReadyDate = ref(null),
  flowerNo = ref(null),
  posType = ref(null),
  fgArticle = ref(null),
  designNum = ref(null),
  mouldNo = ref(null),
  source = ref(null);

// Get values
const useWODetails = useWoDetailsStore();
const oi = useWODetails.orderInfo;

orderNo.value = oi.orderNo === "null" || oi.orderNo === "" ? " " : oi.orderNo;
dueDate.value = oi.dueDate === "null" || oi.dueDate === "" ? " " : oi.dueDate;
updatedDueDate.value =
  oi.updatedDueDate === "null" || oi.updatedDueDate === ""
    ? " "
    : oi.updatedDueDate;
orderQty.value =
  oi.orderQty === "null" || oi.orderQty === "" ? " " : oi.orderQty;
goodsType.value =
  oi.goodsType === "null" || oi.goodsType === "" ? " " : oi.goodsType;
description.value =
  oi.description === "null" || oi.description === "" ? " " : oi.description;
ringType.value =
  oi.ringType === "null" || oi.ringType === "" ? " " : oi.ringType;
goldType.value =
  oi.goldType === "null" || oi.goldType === "" ? " " : oi.goldType;
site.value = oi.site === "null" || oi.site === "" ? " " : oi.site;
stoneReadyDate.value =
  oi.stoneReadyDate === "null" || oi.stoneReadyDate === ""
    ? " "
    : oi.stoneReadyDate;
flowerNo.value =
  oi.flowerNo === "null" || oi.flowerNo === "" ? " " : oi.flowerNo;
posType.value = oi.posType === "null" || oi.posType === "" ? " " : oi.posType;
fgArticle.value =
  oi.fgArticle === "null" || oi.fgArticle === "" ? " " : oi.fgArticle;
designNum.value =
  oi.designNum === "null" || oi.designNum === "" ? " " : oi.designNum;
mouldNo.value = oi.mouldNo === "null" || oi.mouldNo === "" ? " " : oi.mouldNo;
source.value = oi.source === "null" || oi.source === "" ? " " : oi.source;
</script>

<style lang="scss" scoped>
.detailCon {
  background-color: rgba(255, 255, 255, 0.733);
  margin: 10px 5px 5px 5px;
  border-radius: 10px;
  font-size: 1.1rem;
  @media (max-width: 480px) {
    font-size: 0.8em;
  }
  .detailItem {
    padding: 5px 5px 5px 5px;
    .dTitle {
      color: #1100bc;
      font-weight: bold;
      width: 120px;
    }
    .dValue {
      text-align: center;
      margin-left: 5px;
    }
  }

  .detailItem:nth-child(odd) {
    background-color: white;
  }
  .detailItem:nth-child(even) {
    background-color: #d8dff4;
  }
  .detailItem:first-child {
    border-radius: 10px 10px 0px 0px;
  }
  .detailItem:last-child {
    border-radius: 0px 0px 10px 10px;
  }
  .detailItem:not(:last-child) {
    border-bottom: 1px solid;
    border-bottom-color: grey;
  }
}
</style>
